	var context;
	var shape;
	var board;
	var score;
	var pac_color;
	var pacEye_color;
	var startTime;
	var passedTime;
	var initialFood;
	var initialTime;
	var Eat_Food;
	var cherryImage;
	var healthImage;
	var strawImage;
	var bannanaImage;
	var appleImage;
	var lives;
	var MonstersArry;
	var numOfMonsters;
	var IntervalOfMonsrers;
	var openOrClose;
	
	var gameSound = document.createElement('audio');
	gameSound.setAttribute('src', 'pacman_beginning.wav');
	var DeathSound = document.createElement('audio');
	DeathSound.setAttribute('src', 'pacman_death.wav');
	var EatFruit = document.createElement('audio');
	EatFruit.setAttribute('src', 'pacman_eatfruit.wav');
	
	var winSound = document.createElement('audio');
	winSound.setAttribute('src', 'pacman_intermission.wav');
	
	

	
	var colorArray;
	
	var interval;
	window.addEventListener("load", setColorWelcome, false);
	window.addEventListener("load", setupGame, false);
	
	function setupGame()
	{
			context = canvas.getContext("2d");
			shape=new Object();

			document.getElementById("round2").addEventListener("click", Start, false );
			
			colorArray = new Array("#000000","#03FCFC","#F50905");
			
			usersArray = new Array("p", "Test");
			passArray = new Array("1", "Test");
			initialFood = 50;
			initialTime = 150;
			numOfMonsters = 1;
			lives = 3;
			Eat_Food = 0;
			score = 0;
			
			// cherry image
			cherryImage = new Image();
			cherryImage.src = "images/Cherry.png";
			
			// health image
			healthImage = new Image();
			healthImage.src = "images/colba.png";
			
			// straw image
			strawImage = new Image();
			strawImage.src = "images/Strawberry.png";
			
			// bannana image
			bannanaImage = new Image();
			bannanaImage.src = "images/Banana.png";
			
			// apple image
			appleImage = new Image();
			appleImage.src = "images/Apple.png";
			
			MonstersArry = new Array();
			MonstersArry[0] = new Object();
			MonstersArry[0].img = document.getElementById('monster1');
			MonstersArry[1] = new Object();	
			MonstersArry[1].img = document.getElementById('monster2');
			MonstersArry[2] = new Object();
			MonstersArry[2].img = document.getElementById('monster3');
	}
	
	function Start() {
		gameSound.play();
		openOrClose=true;
		window.clearInterval(interval);
		window.clearInterval(IntervalOfMonsrers);
		MonstersArry[0].x = 0;
		MonstersArry[0].y = 0;	
		MonstersArry[1].x = 9;
		MonstersArry[1].y = 0;
		MonstersArry[2].x = 0;
		MonstersArry[2].y = 9;
		
		window.lastkey = 0;
		board = new Array()
		//score = 0;
		pac_color = document.getElementById('body_color').value;
		pacEye_color = document.getElementById('eyes_color').value;
		var cnt = 100;
		var food_remain = initialFood;
		var pacman_remain = 1;
		var gift_remain = 4;
		startTime= new Date();
		passedTime = 0;
		document.getElementById('lblTime').style.color = "black";
		var highScoreRemained = 0.1*initialFood;
		var mediumScoreRemained = 0.3*initialFood;
		var lowScoreRemained = 0.6*initialFood;
		Eat_Food = 0;
				
		
		for (var i = 0; i < 10; i++) {
			board[i] = new Array();
			for (var j = 0; j < 10; j++) {
			var randomNum = Math.random();
			if (randomNum <= 1.0 * food_remain / cnt) {
				if ((lowScoreRemained>0 && randomNum <= 0.6 * food_remain / cnt) || (mediumScoreRemained==0 && highScoreRemained==0)) {
					lowScoreRemained--;	
					board[i][j]=1;
				}
				else if((mediumScoreRemained>0 && randomNum <= 0.9 * food_remain / cnt) || (highScoreRemained ==0)){
					mediumScoreRemained--;
					board[i][j]=2;
				}
				else if (highScoreRemained>0){
					highScoreRemained--;
					board[i][j]=3;
				}
				food_remain--;
			} else if (randomNum < 1.0 * (pacman_remain + food_remain) / cnt) {
				if ((i==0 && j==0) || (i==0 && j==9) || (i==9 && j==0))
				{
					j--;
					continue;
				}
				shape.i=i;
				shape.j=j;
				pacman_remain--;
				board[i][j] = 10;
			}
			
			else {
				if(gift_remain > 0 && initialFood<96){
					board[i][j] = (Math.random()*(8-4) + 4) | 0;
					gift_remain--;
				}	
				else{
					board[i][j] = 0;
				}
			}
			cnt--;
			}
		}
		keysDown = {};
		addEventListener("keydown", function (e) {
			keysDown[e.keyCode] = true;
		}, false);
		addEventListener("keyup", function (e) {
			keysDown[e.keyCode] = false;
		}, false);
		interval=setInterval(UpdatePosition, 80);
		Draw();
		IntervalOfMonsrers = setInterval(UpdateMonsterPosition, 300);
	}

	function GetKeyPressed() {
		if (keysDown[38]) {
			window.lastkey = 1;
			return 1;
		}
		if (keysDown[40]) { 
			window.lastkey = 2;
			return 2;
		}
		if (keysDown[37]) { 
			window.lastkey = 3;
			return 3;
		}
		if (keysDown[39]) { 
			window.lastkey = 4;
			return 4;
		}
	}

	function Draw() {
		gameSound.play();
		canvas.width=canvas.width; 
		lblScore.value = score;
		var timeRemaining = "" + (initialTime - passedTime);
		if (timeRemaining.indexOf(".")!=-1)
			timeRemaining = timeRemaining.substring(0,timeRemaining.indexOf("."));
		lblTime.value = timeRemaining;
		if (lblTime.value == 0)
		{
			window.alert("Out Of Time !!!");
			gameSound.pause();
			DeathSound.play();
			window.clearInterval(interval);
			return;
		}
		if (lblTime.value < 10)
		{
			lblTime.style.color = "red";
		}
		
		for (var i = 0; i < 10; i++) {
			for (var j = 0; j < 10; j++) {
				var center = new Object();
				center.x = i * 40 + 20;
				center.y = j * 40 + 20;
				if (board[i][j] == 10) {
					if((window.lastkey == 0) || (window.lastkey == 4)){//right
					
					context.beginPath();
					if(openOrClose==true){
					context.arc(center.x, center.y, 20, 0.15 * Math.PI, 1.85 * Math.PI); // half circle
					openOrClose=false;
					}else{
					context.arc(center.x, center.y, 20, 0 * Math.PI, 2 * Math.PI); // half circle
					openOrClose=true;
					}
					//context.arc(center.x, center.y, 20, 0.15 * Math.PI, 1.85 * Math.PI); // half circle
					context.lineTo(center.x, center.y);
					context.fillStyle = pac_color; //color 
					context.fill();
					context.beginPath();
					context.arc(center.x + 5, center.y - 10, 3, 0, 2 * Math.PI); // circle
					context.fillStyle = pacEye_color; //color 
					context.fill();
					}
					else if(window.lastkey == 3){//left
					context.beginPath();
					//context.arc(center.x, center.y, 20, 1.15 * Math.PI, 0.85 * Math.PI); // half circle
					if(openOrClose==true){
					context.arc(center.x, center.y, 20, 1.15 * Math.PI, 0.85 * Math.PI); // half circle
					openOrClose=false;
					}else{
					context.arc(center.x, center.y, 20, 0 * Math.PI, 2 * Math.PI); // half circle
					openOrClose=true;
					}
					context.lineTo(center.x, center.y);
					context.fillStyle = pac_color; //color 
					context.fill();
					context.beginPath();
					context.arc(center.x - 5, center.y - 10, 3, 0, 2 * Math.PI); // circle
					context.fillStyle = pacEye_color; //color 
					context.fill();
					}
					else if(window.lastkey == 1){//up
					context.beginPath();
					if(openOrClose==true){
					context.arc(center.x, center.y, 20, 1.65 * Math.PI, 1.35 * Math.PI); // half circle
					openOrClose=false;
					}else{
					context.arc(center.x, center.y, 20, 0 * Math.PI, 2 * Math.PI); // half circle
					openOrClose=true;
					}
					//context.arc(center.x, center.y, 20, 1.65 * Math.PI, 1.35 * Math.PI); // half circle
					context.lineTo(center.x, center.y);
					context.fillStyle = pac_color; //color 
					context.fill();
					context.beginPath();
					context.arc(center.x - 15, center.y - 3, 3, 0, 2 * Math.PI); // circle
					context.fillStyle = pacEye_color; //color 
					context.fill();
					}
					else if(window.lastkey == 2){//down
					context.beginPath();
					if(openOrClose==true){
					context.arc(center.x, center.y, 20, 0.65 * Math.PI, 0.35 * Math.PI); // half circle
					openOrClose=false;
					}else{
					context.arc(center.x, center.y, 20, 0 * Math.PI, 2 * Math.PI); // half circle
					openOrClose=true;
					}
					//context.arc(center.x, center.y, 20, 0.65 * Math.PI, 0.35 * Math.PI); // half circle
					context.lineTo(center.x, center.y);
					context.fillStyle = pac_color; //color 
					context.fill();
					context.beginPath();
					context.arc(center.x + 15, center.y - 3, 3, 0, 2 * Math.PI); // circle
					context.fillStyle = pacEye_color; //color 
					context.fill();
					}
				}
				

				
				else if (board[i][j] == 1) {
					context.beginPath();
					context.arc(center.x, center.y, 5, 0, 2 * Math.PI); 
					context.fillStyle = colorArray[board[i][j]-1]; //food color
					context.fill();
			}
				else if (board[i][j] == 2) {
					context.beginPath();
					context.arc(center.x, center.y, 8, 0, 2 * Math.PI); 
					context.fillStyle = colorArray[board[i][j]-1]; //food color
					context.fill();
			}
				else if (board[i][j] == 3) {
					context.beginPath();
					context.arc(center.x, center.y, 11, 0, 2 * Math.PI); 
					context.fillStyle = colorArray[board[i][j]-1]; //food color
					context.fill();
			}

				else if (board[i][j] == 4) {//cherry
					context.drawImage(cherryImage, i*40, j*40, 40, 40);
			}
				else if (board[i][j] == 5) {//straw
					context.drawImage(strawImage, i*40, j*40, 40, 40);
			}
				else if (board[i][j] == 6) {//health
					context.drawImage(healthImage, i*40, j*40, 40, 40);
			}
				else if (board[i][j] == 7) {//bannana
					context.drawImage(bannanaImage, i*40, j*40, 40, 40);
			}
				else if (board[i][j] == 8) {//apple
					context.drawImage(appleImage, i*40, j*40, 40, 40);
			}
			else if(board[i][j] != 0){
					context.beginPath();
					context.arc(center.x, center.y, 5, 0, 2 * Math.PI); 
					context.fillStyle = colorArray[board[i][j]-1]; //food color
					context.fill();
				}
			
			}
		}
		
		for (var i = 0; i<numOfMonsters; i++) 
		{	
			context.drawImage(MonstersArry[i].img, MonstersArry[i].x*40, MonstersArry[i].y*40, 40, 40);
		}

		for (var i = 0; i<lives; i++)
		{
			document.getElementById("pac" + (i+1)).style.visibility = "visible";
		}
		for (var i=lives; i<3; i++)
		{
			document.getElementById("pac" + (i+1)).style.visibility = "hidden";
		}
	}

	function UpdatePosition() {
		for (var i = 0; i<numOfMonsters; i++)
		{
			if (MonstersArry[i].x==shape.i && MonstersArry[i].y==shape.j)
			{
				if (lives==1)
				{
				gameSound.pause();
				DeathSound.play();
				lives--;
				Draw();
				showDialog('You Lost!!!','The monsters caught you!!!','error',2);
				//window.alert("Game Over!!!!");
				window.clearInterval(interval);
				window.clearInterval(IntervalOfMonsrers);
				Draw();
				}
				else 
				{
					lives--;
					board[shape.i][shape.j] = 0;
					shape.i=4;
					shape.j=4;		
					board[4][4] = 10;
					//window.clearInterval(interval);
					//window.clearInterval(IntervalOfMonsrers);
					keysDown[37]=false;
					keysDown[38]=false;
					keysDown[39]=false;
					keysDown[40]=false;
					window.alert("Try Again!");
					//interval=setInterval(UpdatePosition, 80);
					//IntervalOfMonsrers = setInterval(UpdateMonsterPosition, 300);
					updateAndDrawMonstersPosition();
					
					//Draw();
					//Start();
				}
				return;
			}
		}
		board[shape.i][shape.j]=0;
		var x = GetKeyPressed()
		if(x==1)
		{
			if(shape.j>0)
			{
				shape.j--;
			}
		}
		if(x==2)
		{
			if(shape.j<9)
			{
				shape.j++;
			}
		}
		if(x==3)
		{
			if(shape.i>0)
			{
				shape.i--;
			}
		}
		if(x==4)
		{
			if(shape.i<9)
			{
				shape.i++;
			}
		}
	var lastSpot = board[shape.i][shape.j];
	if(typeof lastSpot == "undefined")
		Eat_Food++;
	console.log(lastSpot);
	if(lastSpot>0 && lastSpot<9 && lastSpot != 6)
	{
		if(lastSpot==1){
			score=score+5;
			Eat_Food++;
		}
		else if(lastSpot==2){
			score=score+10;
			Eat_Food++;
		}
		else if(lastSpot==3){
			score=score+20;
			Eat_Food++;
		}
		else{
			gameSound.pause();
			EatFruit.play();
			gameSound.play();
			score=score+30;
			}
	}
	else if(lastSpot==6 && lives<3){
		lives++;
	}
		board[shape.i][shape.j]=10;
		var currentTime=new Date();
		passedTime=(currentTime-startTime)/1000;
		if(score>=150&&passedTime<=10)
		{
			pac_color="green";
		}
	if(Eat_Food==initialFood)
	{
		Draw();
		window.clearInterval(interval);
		
		gameSound.pause();
		winSound.play();
		showDialog('Winner!!!','Lets see if you can do faster!','success');
		//window.alert("Game Completed!!!");
	}
		else
		{
			Draw();
		}
	}
	
	function UpdateMonsterPosition()
	{
		var time = new Date();
		if ((time - startTime)/1000<3) return;
		//if (star.collected) return;
		var delta_x;
		var delta_y;
		for(var i = 0; i<numOfMonsters; i++){
			var rand = Math.random();
			if (rand <= 0.5)
			{
				delta_x = MonstersArry[i].x - shape.i;
				if (delta_x < 0)
					MonstersArry[i].x++;
				else if (delta_x > 0)
					MonstersArry[i].x--;
			}
			else
			{
				delta_y = MonstersArry[i].y - shape.j;
				if (delta_y  < 0)
					MonstersArry[i].y++;
				else if (delta_y > 0)
					MonstersArry[i].y--;
			}
		}
	}

	
function checkLoginDetails()
{
	var username = document.getElementById('username_login').value;
	var password = document.getElementById('password_login').value;
	
	var deny = false;
	
	if (username=="")
	{
		document.getElementById('username_loginError').innerText = "Please enter a username";
		document.getElementById('username_loginError').style.visibility = "visible";
		deny = true;
	}
	else document.getElementById('username_loginError').style.visibility = "hidden";
	if (password=="")
	{
		document.getElementById('password_loginError').innerText = "Please enter a password";
		document.getElementById('password_loginError').style.visibility = "visible";
		deny = true;
	}
	else document.getElementById('password_loginError').style.visibility = "hidden";
	
	if (deny) return;
	var userID = usersArray.indexOf(username);
	var passwordID = passArray.indexOf(password);
	
	if (userID==-1)
	{
		document.getElementById('username_loginError').innerText = "Invalid username";
		document.getElementById('username_loginError').style.visibility = "visible";
		deny=true;
	}
	else document.getElementById('username_loginError').style.visiblity = "hidden";
	
	if ((!deny) && userID != passwordID)
	{
		document.getElementById('password_loginError').innerText = "Incorrect password";
		document.getElementById('password_loginError').style.visibility = "visible";
		deny = true;
	}
	
	if (deny) return;
	document.getElementById('login_li').style.color="white";
	ShowSection('gamesettings');
}

function registerValidation()
{	
	var firstName = $( "#firstName" ).val();
	var lastName = $( "#lastName" ).val();
	for(var i=0; i<firstName.length; i++)
	{
		num = firstName.charCodeAt(i);
		if(num>47 && num<57)
		{
			alert("The First name must contain only letters");
			event.preventDefault();
		}
	}
	for(var i=0; i<lastName.length; i++)
	{
		num = lastName.charCodeAt(i);
		if(num>47 && num<57)
		{
			alert("The Second name must contain only letters");
			event.preventDefault();
		}
	}

	var num;
	var password = $( "#password" ).val();
	if(password.length <8)
	{
		alert("Your password must contain at least 8 characters");
		event.preventDefault();
	}
	for(var i=0; i<password.length; i++)
	{
		num = password.charCodeAt(i);
		if(!((num>47 && num<57)||(num>64 && num<91) || (num>96 && num<123)))
		{
			alert("The password must contain only numbers and letters");
			event.preventDefault();
		}
	}
}
function setAmountOfFood(amount) {
	initialFood = amount;
}

function ShowSection(id)
{	
	back();
	//hide all sections
	var section4 = document.getElementById('welcome');
	section4.style.display = "none";
	var section5 = document.getElementById('contact');
	section5.style.display = "none";
	var section6 = document.getElementById('login');
	section6.style.display = "none";
	var section7 = document.getElementById('register');
	section7.style.display = "none";
	var section8 = document.getElementById('gamesettings');
	section8.style.display = "none";
	var section9 = document.getElementById('game');
	section9.style.display = "none";

	//show only one section
	var selected = document.getElementById(id);
	selected .style.display = "block";

		
	
	if (id=="register"){
		document.getElementById('java').style.overflow="visible";
		hideColorsLabls();
		document.getElementById('register_li').style.color="yellow";
		document.getElementById('welcome_li').style.color="white";
	}
	
	else if (id=="welcome"){
		document.getElementById('java').style.overflow="visible";
		hideColorsLabls();
		document.getElementById('welcome_li').style.color="yellow";
	}
	else if (id=="login"){
		document.getElementById('java').style.overflow="visible";
		hideColorsLabls();
		document.getElementById('login_li').style.color="yellow";
		document.getElementById('welcome_li').style.color="white";
	}
	else if (id=="about"){
		document.getElementById('java').style.overflow="visible";
		hideColorsLabls();
		document.getElementById('about_li').style.color="yellow";
		document.getElementById('welcome_li').style.color="white";
	}
	else if (id=="contact"){
		document.getElementById('java').style.overflow="visible";
		hideColorsLabls();
		document.getElementById('contact_li').style.color="yellow";
		document.getElementById('welcome_li').style.color="white";

	}
	
	else if (id=="game"){
		document.getElementById('java').style.overflow="hidden";
		colorArray[0] = document.getElementById('lowScore_color').value;
		colorArray[1] = document.getElementById('mediumScore_color').value;
		colorArray[2] = document.getElementById('highScore_color').value;
		Start();
	}
	
}

function hideColorsLabls()
{
	document.getElementById('welcome_li').style.color="white";
	document.getElementById('register_li').style.color="white";
	document.getElementById('login_li').style.color="white";
	document.getElementById('about_li').style.color="white";
	document.getElementById('contact_li').style.color="white";
}

function updateNumOfMonsters(amount) {
	numOfMonsters = amount;
}

function update_time(val){
	initialTime = val;
}


function setColorWelcome()
{
	document.getElementById('welcome_li').style.color="yellow";
}

function back(){
	gameSound.pause();
	window.clearInterval(interval);
	window.clearInterval(IntervalOfMonsrers);
	lives=3;
	score = 0;
}

function restart(){
	lives=3;
	score = 0;
	Start();
}

function updateAndDrawMonstersPosition(){


		MonstersArry[0].x = 0;
		MonstersArry[0].y = 0;	
		MonstersArry[1].x = 9;
		MonstersArry[1].y = 0;
		MonstersArry[2].x = 0;
		MonstersArry[2].y = 9;
		
}
